<template>
  <!-- 当点击 取消按钮 时，关闭弹窗 -->
  <el-dialog :title="title" :visible.sync="visible" width="60%" top="4vh" :append-to-body="true" @close="clearDialog()"
    v-loading="loding" :close-on-click-modal="false">
    <ele-form v-model="dialogfrom" v-bind="formConfig" ref="form"></ele-form>
    <div id="printArea2">
      <barcode-print :barcodeInfo="barcodeInfo" ref="print" :isPrint="false" :key="time"
        v-if="Object.keys(barcodeInfo).length > 0"></barcode-print>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="clearDialog()">{{ $t('common.cancel') }}</el-button>

      <el-button v-if="dialogfrom.quantityPrinted != 0" type="primary" @click="printBoxcode()" v-print="print">
        {{ $t('mesTrackingCardPrint.reprint') }}
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import {
  barcodePrintingList2,
  printTemplateInfo,
  getBoxCount,
  printBarcode,
} from '@/api/trackingcardprint/mesTrackingCardPrint'
import qs from 'qs'
import BarcodePrint from '@/components/barcodePrint/barcodePrint'

let arrBarcodePrintingList2 = []
export default {
  name: 'barcodePrintingAddModel',
  watch: {
    visible(val, oldVal) {
      if (!val) {
        this.$nextTick(() => {
          this.$refs.form.resetForm()
        })
        this.barcodeInfo = {}
      }
    }
  },
  props: {
    title: {
      type: String,
      default: ''
    }
  },
  components: { BarcodePrint },
  data() {
    let that = this
    return {
      time: 0,
      loding: false,
      formConfig: {
        span: 24,
        isShowBackBtn: false,
        isShowSubmitBtn: false,
        labelPosition: 'right',
        formDesc: {
          orderCode: {
            type: 'input',
            label: $i18n.t('mesTrackingCardPrint.workOrderCode'),
            layout: 8,
            required: true,
            disabled: true
          },

          barcodePrintTemp: {
            type: 'select',
            label: $i18n.t('mesTrackingCardPrint.barcodePrintTemp'),
            layout: 8,
            disabled: (data) => {
              // return this.barcodeInfo.isCreateBarcode == 1 ? true : false
              return this.barcodeInfo.isCreateTrackcode == 1 ? true : false
            },
            prop: {
              text: 'templateName',
              value: 'templateName'
            },
            options: async (data) => {
              let list = await barcodePrintingList2()
              arrBarcodePrintingList2 = list.data.result || []
              // that.$nextTick(() => {
              //   that.handleChange(data.barcodePrintTemp);
              // });
              return arrBarcodePrintingList2
            },
            required: true,
            on: {
              change: (data, e) => {
                that.handleChange(data)
              }
            }
          },
          prodCode: {
            type: 'input',
            label: $i18n.t('mesTrackingCardPrint.materialCode'),
            layout: 8,
            required: true,
            disabled: true
          },
          prodName: {
            type: 'input',
            label: $i18n.t('mesTrackingCardPrint.materialName'),
            layout: 8,
            required: true,
            disabled: true
          },
          quantityPrinted: {
            type: 'number',
            label: $i18n.t('mesTrackingCardPrint.printedQuantity'),
            layout: 8,
            required: true,
            disabled: true
          },
          quantityNotPrinted: {
            type: 'number',
            label: $i18n.t('mesTrackingCardPrint.notPrintedQuantity'),
            layout: 8,
            required: true,
            disabled: true
          }
        }
      },
      barcodeInfo: {},
      dialogfrom: {},
      visible: false,
      loading: false,
      list: [],
      arrBarcodePrintingList2: [],
      print: {
        id: 'printArea2'
      },
      id: ''
    }
  },
  methods: {
    //初始化
    init(params) {
      this.id = params.id
      this.dialogfrom = params
      this.barcodeInfo = params
      this.visible = true
      this.$nextTick(() => {
        this.getBoxCount()
        setTimeout(() => {
          this.handleChange(params.barcodePrintTemp)
        }, 1000)
      })
    },
    async getBoxCount() {
      let res = await getBoxCount({
        orderCode: this.dialogfrom.orderCode
      })
      this.dialogfrom = res.data.result
    },

    //条码模板选择
    handleChange(e) {
      if (this.arrBarcodePrintingList2.length == 0) return
      if (!this.dialogfrom.barcodePrintTemp) return

      let obj = this.arrBarcodePrintingList2.find((ite) => {
        return e == ite.templateName
      })
      this.loading = true
      printTemplateInfo(obj.id)
        .then((res) => {
          this.time = new Date().getTime()
          this.barcodeInfo = {
            ...this.barcodeInfo,
            ...res.data.result,
            values: this.dialogfrom
          }
        })
        .finally((res) => {
          this.loading = false
        })
    },

    // 打印
    async printBoxcode() {
      this.$refs.form.validate().then(async (valid) => {
        let res = await printBarcode({
          id: this.dialogfrom.id,
          printtype: '1'
        })
        if (res.data.success) {
          this.getBoxCount()
        }
      })
    },

    clearDialog() {
      this.visible = false
      this.$emit('refreshList')
    }
  },
  async created() {
    let list = await barcodePrintingList2()
    this.arrBarcodePrintingList2 = list.data.result || []
  }
}
</script>
